<script lang='ts' setup>
import {message} from 'ant-design-vue';
import {getWechat, watchScan} from '~/api/wechat'

let {wechatModel, registerModel} = $(useModel())
let {switchLoginState} = $(useUser())

let lock = $ref(true)  // 防抖
let qrcodeUrl = $ref(null)
let timer = $ref(null)
// 二维码地址接口请求
const getQrcode = async () => {
    if (lock) {
        lock = false
        const res = await getWechat()
        if (res.code === 0) {
            qrcodeUrl = res.data.qrcodeUrl
            lock = true
            // 轮询请求是否扫码接口
            timer = setInterval(() => watchScanDate(res.data.ticket), 3000)
        }
    }
}
await getQrcode()

// 轮询接口请求
const watchScanDate = async (ticket: string) => {
    const res = await watchScan({ticket})
    if (res.code === 0) {
        switchLoginState(res.data)
        wechatModel = false
        registerModel.base = false
        clearInterval(timer)
        message.success('登录成功')
    }
    // 如果通过手动关闭二维码，清除定时器
    watch(() => wechatModel, (val) => !val && clearInterval(timer))
}

</script>

<template>
    <div flexc flex-col mt-50px>
        <cdn-img w-200px h-200px :src='qrcodeUrl'/>
        <div flexc mt-26px>
            <cdn-img src="/images/wechat_icon.png" cursor-pointer mr-2px w-34px h-34px/>
            <span text-18px color="#555555">使用微信扫一扫登录</span>
        </div>
    </div>
</template>

<style lang='less' scoped>

</style>